<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标经过变色</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			table {
				width: 700px;
				border-spacing: 0;
				margin: 100px auto;
				border-collapse: collapse;
			}
			table thead tr{
				width: 700px;
				height: 30px;
				background-color: mediumpurple;
				border-bottom: 1px solid #ccc;
			}
			table thead tr td:nth-child(1) {
				width: 100px !important;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			table thead tr td:nth-child(2) {
				width: 200px !important;
				height: 30px;
				line-height: 30px;
				text-align: right;
				padding-right: 10px;
			}
			table thead tr td:nth-child(3) {
				width: 200px !important;
				height: 30px;
				line-height: 30px;
				text-align: right;
				padding-right: 10px;
			}
			table thead tr td:nth-child(4) {
				width: 200px !important;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			tbody {
				width: 100%;
			}
			tbody tr {
				width: 100%;
				height: 30px;
				border-bottom: 1px solid #ccc;
			}
			tbody tr td {
				height: 30px;
				line-height: 30px;
			}
			tbody tr td:nth-child(1) {
				width: 100px;
				text-align: center;
			}
			tbody tr td:nth-child(2) {
				width: 200px;
				text-align: right;
				padding-right: 10px;
			}
			tbody tr td:nth-child(3) {
				width: 200px;
				text-align: right;
				padding-right: 10px;
				background: rgba(112,193,219,.3);
			}
			tbody tr td:nth-child(4) {
				width: 200px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</thead>
				
			<tbody class="tbody">
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			//获取tbody下面的所有行
			var trs = document.querySelectorAll('tbody tr');
			console.log(trs);
			//遍历trs绑定事件
			for(var i = 0; i < trs.length; i++) {
				trs[i].onmouseover = function() {
					//将当前对象的背景颜色设置为粉红色
					this.style.backgroundColor = 'pink';
				}
				//设置当鼠标离开的时候,没有背景颜色
				trs[i].onmouseout = function() {
					this.style.backgroundColor = '';
				}
			}
		</script>
	</body>
</html>
